<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<title>课程管理</title>
<style type="text/css">
table {
	width: 800px;
	boder-collapse: collapse;
}

td, th {
	padding: 8px 15px;
	text-align: center;
}
</style>
<div id="dialog" style="display: none;"></div>
<p>
	<button type="button" onclick="add()">新增</button>
	<button type="button" onclick="search()">查询</button>
</p>

<table border="1">
	<thead>
		<tr>
			<th>序号</th>
			<th>课程名称</th>
			<th>课时</th>
			<th colspan="2">操作</th>
		</tr>
	</thead>
	<tbody id="tbody"></tbody>
</table>


<script type="text/javascript">
      var queryParam="";

	$(function() {
		$('#dialog').dialog({
			autoOpen : false,
			title : '编辑',
			model : true,
			width : 400,
			buttons : [ {
				text:"提交",
				click: function() {
					var self = $(this);
					var form = $(this).find('form');
					var params = form.serialize();
					var action = form.attr('action');
					if (action == 'course/save') {
						$.post('course/save', params, function(data) {
							refreshTable();
							self.dialog('close');
						})
					} else {
						queryParam = params;
						refreshTable();
						self.dialog('close');
					}
				}
			}, {
                      text:"返回",
				    click: function() {
					$(this).dialog('close');
				}
			} ]
		})
		refreshTable();
	})

	function refreshTable() {
		$.post('course/list',queryParam, function(data) {
			var tbody = $('#tbody');
			tbody.empty();
			for (var i = 0; i < data.length; i++) {
				var bj = data[i];
				var tr = $('<tr/>');
				tr.append($('<td/>').html(bj.id));
				tr.append($('<td/>').html(bj.name));
				tr.append($('<td/>').html(bj.classHour));
				tr.append($('<td/>').append($('<button/>').html('修改').attr('onclick','xg('+bj.id+')')));
				tr.append($('<td/>').append($('<button/>').html('删除').attr('onclick','del(' + bj.id + ')')));
				tbody.append(tr);
			}
			$('button').button();
		})
	}
	function xg(id) {
		var dialog = $('#dialog');
		dialog.load('course/edit', {id : id}, function() {
			dialog.dialog('open');
		})
	}
	function add() {
		var dialog = $('#dialog');
		dialog.load('course/edit', function() {
			dialog.dialog('open');
		})
	}
	function search() {
		var dialog = $('#dialog');
		dialog.load('course/search', queryParam, function() {
			dialog.dialog('open');
		})
	}
	function del(id) {
		if (confirm('宁确定这么做吗？')) {
			$.post('course/delete', {
				id : id
			}, function(data) {
				refreshTable();
			})
		}
	}
</script>